<template>
  <div class="app-container" v-if="show">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <!-- <el-form-item label="统计月份" prop="monthly">
        
        <el-date-picker
          type="month"
          @change="changeTime"
          v-model="queryParams.monthly"
          placeholder="选择月"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="品牌" prop="brandName">
        <!-- <el-input
          v-model="queryParams.brand"
          placeholder="请输入品牌"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.brand"
          placeholder="选择品牌"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_pp"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supplier">
        <!-- <el-input
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_coder"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年份" prop="oneYear">
        <el-date-picker
          type="year"
          @change="changeTime"
          v-model="queryParams.oneYear"
          placeholder="选择年份"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="产品款号" prop="spu">
       
        <el-select
          v-model="queryParams.spu"
          clearable
          filterable
          remote
          :remote-method="getData"
          :loading="loading"
          placeholder="产品款号"
        >
          <el-option
            v-for="item in productNooptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="合同号" prop="contractNumber">
        <el-input
          v-model="queryParams.contractNumber"
          placeholder="请输入合同号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item class="flex_one tr">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- style="padding: 32px" -->
    <section id="section">
      <el-card>
        <!-- <div slot="header">
          <el-select
            v-model="itemType"
            placeholder="请选择视角"
            style="width: 116px"
          >
            <el-option
              v-for="dict in itemTypeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          
        </div> -->
        <el-row :gutter="20" class="data_section">
          <KoiCard :itemData="itemData" />
          <!-- <panel-group :itemData="itemData" /> -->
        </el-row>
        <!-- <el-row
          style="background: #fff; padding: 32px 32px; margin-bottom: 32px"
        >
          <chartData :chart-data="echartDataI" />
        </el-row> -->
      </el-card>
    </section>

    <!-- <el-form
      class="ry_form"
      v-show="showSearch"
      :inline="true"
      label-width="100px"
      :model="queryParams"
      ref="queryForm"
      size="medium"
    >
      <el-form-item label="类型" prop="panelType">
        <DictRadio
          v-model="queryParams.panelType"
          :radioData="dict.type.wms_inventory_panel_type"
          size="small"
          @change="handleQuery"
        ></DictRadio>
      </el-form-item>
      <el-form-item label="物料" prop="itemId">
        <item-select v-model="queryParams.itemId"></item-select>
      </el-form-item>
      <el-form-item label="仓库" prop="rackId">
        <wms-warehouse-cascader
          v-model="queryParams.place"
        ></wms-warehouse-cascader>
      </el-form-item>
      <el-form-item label="库存" prop="quantity">
        <number-range v-model="queryParams.quantityRange"></number-range>
      </el-form-item>
      <el-form-item class="flex_one tr">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form> -->

    <el-row class="mb8" :gutter="10" style="margin-top: 16px">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <u-table
      use-virtual
      :data="wmsInventoryList"
      @selection-change="handleSelectionChange"
      :height="550"
      border
      @cell-click="goodstableEdit"
      :row-style="rowStyle"
    >
      <u-table-column width="50" label="序号" prop="serialNumber" fixed />
      <u-table-column label="品牌" align="center" prop="brand" fixed />

      <u-table-column label="供应商" align="center" prop="supplier" fixed />
      <u-table-column
        label="采购订单数(产品+配件)"
        align="center"
        prop="purOrderQuantity"
        fixed
      />
      <u-table-column
        label="产品合同总数"
        align="center"
        prop="contractQuantity"
        fixed
      />
      <u-table-column
        label="下单款式总量（item）"
        align="center"
        prop="orderItemQuantity"
      >
        <template v-slot:header>
          <div>下单款式总量</div>
          <div>（item）</div>
        </template>
      </u-table-column>
      <u-table-column
        label="下单SKC数量"
        align="center"
        prop="orderSkcQuantity"
      />
      <u-table-column
        label="已下单sku件数"
        align="center"
        prop="totalOrderQuantity"
      />

      <u-table-column
        label="已入库sku件数"
        align="center"
        prop="quantityReceived"
      />
      <u-table-column
        label="待入库sku件数"
        align="center"
        prop="unSkuStorageQuantity"
      />
      <u-table-column
        label="逾期未交付件数"
        align="center"
        prop="currentDelayQuantity"
      >
      </u-table-column>
      <u-table-column
        label="质检退货sku件数"
        align="center"
        prop="returnQuantity"
      />
      <u-table-column
        label="不合格率(年)"
        align="center"
        prop="fractionDefectiveStr"
      />
      <u-table-column
        label="平均交货周期"
        align="center"
        prop="avgDeliveryCycle"
      />
      <u-table-column
        label="平均采购件数"
        align="center"
        prop="avgPurchaseQuantity"
      />
    </u-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="关联采购单信息"
      :visible.sync="isOpen"
      width="80%"
      v-if="isOpen"
    >
      <el-row class="mb8" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handlePurchaseExport"
            >导出
          </el-button>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <el-table :data="PurchaseBasicsDwdList" :height="600">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column
          width="120"
          label="下单日期"
          align="center"
          prop="dataDate"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dataDate, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌" align="center" prop="brandName" />
        <el-table-column label="供应商" align="center" prop="supplier" />
        <el-table-column
          width="120"
          label="合同号"
          align="center"
          prop="contractNumber"
        />
        <el-table-column width="150" label="sku" align="center" prop="sku" />
        <el-table-column
          label="采购单号"
          align="center"
          prop="purchaseOrderNumber"
        />
        <el-table-column label="新品/老品" align="center" prop="isNewProduct" />
        <el-table-column label="下单数量" align="center" prop="orderQuantity" />
        <el-table-column
          label="合同采购价"
          align="center"
          prop="contractPurchasePrice"
        />
        <el-table-column
          label="合同采购金额"
          align="center"
          prop="contractAmount"
        />
        <el-table-column label="是否含税" align="center" prop="isTaxIncluded" />
        <el-table-column
          label="单件附加费用"
          align="center"
          prop="additionalCostPerUnit"
        />
        <el-table-column
          label="订单附加费用"
          align="center"
          prop="orderAdditionalCost"
        />
        <el-table-column
          label="附加费用说明"
          align="center"
          prop="additionalCostDescription"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.additionalCostDescription"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.additionalCostDescription }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="成本裸价"
          align="center"
          prop="costPriceIncludingTax"
        />
        <el-table-column
          label="成本裸价"
          align="center"
          prop="costPriceExcludingTax"
        />
        <el-table-column
          label="单件税金"
          align="center"
          prop="taxAmountPerUnit"
        />
        <el-table-column
          label="协议到货日期"
          align="center"
          prop="contractDeliveryDate"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.contractDeliveryDate, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="已入库数量"
          align="center"
          prop="quantityReceived"
        />
        <el-table-column
          label="是否准交"
          align="center"
          prop="isOverdue30Days"
        />
        <el-table-column
          label="协议日期内已交货数量"
          align="center"
          prop="overdueQuantity30Days"
        />
        <el-table-column label="是否超入" align="center" prop="isOverOrder" />
        <el-table-column
          label="超入数量"
          align="center"
          prop="overOrderQuantity"
        />
        <el-table-column label="备注" align="center" prop="remarks" />
      </el-table>

      <pagination
        v-show="PurchaseBasicsDwdTotal > 0"
        :total="PurchaseBasicsDwdTotal"
        :page.sync="pageReq.pageNum"
        :limit.sync="pageReq.pageSize"
        @pagination="pageList"
      />
    </el-dialog>

    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> 供应商下单与退货数</span>
        <span>
          <el-button
            style="margin-left: 5px"
            type="primary"
            size="mini"
            @click="isOpenMinAll = true"
            >查看完整数据</el-button
          >
        </span>
      </div>
      <MinChart
        :id="'MinChart'"
        :minchartData="echartDataMin"
        width="100%"
        height="410px"
      ></MinChart>
    </el-card>
    <el-dialog
      title="供应商下单与退货数"
      :visible.sync="isOpenMinAll"
      width="100%"
      v-if="isOpenMinAll"
    >
      <MinChart
        :id="'echartDataMinAll'"
        :minchartData="echartDataMinAll"
        width="100%"
        height="410px"
      ></MinChart>
    </el-dialog>

    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i> 供应商已交付数量与待交付数量</span
        >
        <span>
          <el-button
            style="margin-left: 5px"
            type="primary"
            size="mini"
            @click="isOpenAll = true"
            >查看完整数据</el-button
          >
        </span>
      </div>

      <MixChart
        :id="'MixChart'"
        :chartData="echartData"
        width="100%"
        height="410px"
      ></MixChart>
    </el-card>

    <el-dialog
      title="供应商已交付数量与待交付数量"
      :visible.sync="isOpenAll"
      width="100%"
      v-if="isOpenAll"
    >
      <MixChart
        :id="'echartDataAll'"
        :chartData="echartDataAll"
        width="100%"
        height="410px"
      ></MixChart>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import KoiCard from "./components/KoiCard.vue";
import moment from "moment";
import {
  getPurchaseBasicsDwd,
  delPurchaseBasicsDwd,
  addPurchaseBasicsDwd,
  updatePurchaseBasicsDwd,
  synData,
  selectConditionList,
  selectPurchaseMonth,
  selectPurchaseReturnVoList,
  selectPurchaseCost,
  selectPurchasePriceData,
  selectPurchasecostStatistics,
  selectPurchaseOverallData,
  selectPurchaseOverallList,
  purchaseOverallStatistics,
  //合计
  selectPurchaseOverallAll,
} from "@/api/purchase/PurchaseBasicsDwd";
// import { listWmsInventory, exportWmsInventory } from "@/api/wms/inventory";
// import NumberRange from "@/components/NumberRange";
// import ItemSelect from "@/components/ItemSelect";
import PanelByItem from "@/views/purchase/inventory/component/PanelByItem.vue";
import PanelByItemType from "@/views/purchase/inventory/component/PanelByItemType.vue";
import PanelByWarehouse from "@/views/purchase/inventory/component/PanelByWarehouse.vue";
import PanelByArea from "@/views/purchase/inventory/component/PanelByArea.vue";
// import { isStarRepo } from "@/utils/is-star-plugin";
// import { mapGetters } from "vuex";
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  addTemplateAndSecondry,
  addProNoColorSize,
  productNoLike,
} from "@/api/product/template";
import chartData from "./components/chartData";
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
import MinChart from "@/views/purchase/shop/Charts/MinChart.vue";
import MixChart from "@/views/purchase/shop/Charts/MixChart.vue";
export default {
  name: "WmsInventory",
  dicts: [
    "sys_product_qudao",
    "sys_one_zero",
    "sys_product_size",
    "sys_sample_sf",
    "sys_jst_sample_sf",
    "sys_product_pp",
    "sys_product_coder",
  ],
  components: {
    PanelByArea,
    PanelByWarehouse,
    PanelByItemType,
    PanelByItem,
    // ItemSelect,
    // NumberRange,
    PanelGroup,
    PanelGroupI,
    chartData,
    KoiCard,
    MinChart,
    MixChart,
  },
  // dicts: ["wms_inventory_panel_type"],
  data() {
    return {
      //倒数两个图
      isOpenAll: false,
      isOpenMinAll: false,
      echartDataMinAll: {},
      echartDataAll: {},

      wmsList: [],
      //倒数两个图
      echartData: {
        // order: {
        xData: [],
        female: [],
        male: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      //传递数据
      echartDataI: {
        columns: ["支付日期", "单价", "数量"],
        rows: [],
      },

      spuData: {},
      itemType: "item",
      itemTypeList: [
        { value: "item", label: "item" },
        { value: "skc", label: "skc" },
      ],
      itemData: {},
      itemDataList: {},
      productNooptions: [],
      PurchaseBasicsDwdList: [],
      isOpen: false,
      //   queryParams.: "",
      rangeDate: [],
      show: true,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库存表格数据
      wmsInventoryList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataDate: null,
        brandName: null,
        supplier: null,
        contractNumber: null,
        sku: null,
        purchaseOrderNumber: null,
        isNewProduct: null,
        orderQuantity: null,
        contractPurchasePrice: null,
        contractAmount: null,
        isTaxIncluded: null,
        additionalCostPerUnit: null,
        orderAdditionalCost: null,
        additionalCostDescription: null,
        costPriceIncludingTax: null,
        costPriceExcludingTax: null,
        taxAmountPerUnit: null,
        contractDeliveryDate: null,
        quantityReceived: null,
        isOverdue30Days: null,
        overdueQuantity30Days: null,
        isOverOrder: null,
        overOrderQuantity: null,
        remarks: null,
        dataYear: null,
        dataMonth: null,
        startTime: null,
        endTime: null,
        // contractType: "产品",
        monthly: "",
        oneYear: "",
      },
      PurchaseBasicsDwdTotal: 0,
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParamsPurchase: {},
      // 表单参数
      form: {},
      columns: [],
      panelType: 5,

      chart: null, // ECharts实例
      options: {
        grid: {
          left: "5%",
          top: "10%",
          right: "10%",
          bottom: "10%",
        },
        // ECharts配置项
        title: {
          text: "供应商下单与退货数",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["下单总数", "退货总数"],
        },
        xAxis: {
          type: "category",
          data: [], // 这里会动态填充supplier数据
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "下单总数",
            type: "bar",
            data: [], // 下单总数
          },
          {
            name: "退货总数",
            type: "bar",
            data: [], // 退货总数
          },
        ],
      },

      chartData: null, // ECharts实例
      optionsData: {
        grid: {
          left: "5%",
          top: "10%",
          right: "10%",
          bottom: "10%",
        },
        // ECharts配置项
        title: {
          text: "供应商已交付数量与待交付数量",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["已交付总数", "待交付总数"],
        },
        xAxis: {
          type: "category",
          data: [], // 这里会动态填充supplier数据
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "已交付总数",
            type: "bar",
            data: [], // 下单总数
          },
          {
            name: "待交付总数",
            type: "bar",
            data: [], // 退货总数
          },
        ],
      },
    };
  },
  created() {
    this.queryParams.oneYear = moment(new Date()).format("YYYY");
    // const res = await isStarRepo(
    //   "zccbbg",
    //   "RuoYi-Mall",
    //   this.userId,
    //   "http://wms.ichengle.top/inventory",
    //   "ruoyi-mall-商城",
    //   "https://gitee.com/zccbbg/RuoYi-Mall"
    // );
    // this.show = res;
    // if (res) {
    //   this.getList();
    // }
    this.getList();

    // let date = new Date(new Date() - 30 * 24 * 3600 * 1000);

    // this.queryParams.monthly = moment(date).format("YYYY.MM");
  },
  //   computed: {
  //     // ...mapGetters(["userId"]),
  //     currentComponent() {
  //       console.log(this.panelType);
  //       let type = parseInt(this.panelType);
  //       switch (type) {
  //         case 5:
  //           return "panel-by-warehouse";
  //         case 10:
  //           return "panel-by-area";
  //         case 20:
  //           return "panel-by-item-type";
  //         default:
  //           return "";
  //       }
  //     },
  //   },
  methods: {
    rowStyle({ row, rowIndex }) {
      // return "font-weight: bold;";
      if (rowIndex == this.wmsInventoryList.length - 1) {
        return "position: sticky;bottom: 0;font-weight: bold;";
      } else {
        return "";
      }
    },
    /* 获取货号列表 */
    getData(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      productNoLike(key).then((res) => {
        this.loading = false;
        this.productNooptions = res.data;
        // console.log(JSON.stringify(this.options));
      });
    },
    pageList() {
      const row = this.itemDataList;

      selectConditionList({
        ...this.pageReq,
        // spu: row.spu,
        // colorProperty: row.colorProperty,
        // purchaseRelationInfo: row.purchaseRelationInfo,
        purchaseOrderList: row.purchaseRelationInfo.replace("、", ","),
        skc: row.skc,
        colorProperty: row.colorProperty,
      }).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
    },
    async goto(row) {
      this.itemDataList = row;
      this.pageReq.pageNum = 1;
      this.queryParamsPurchase = {
        ...this.pageReq,

        // purchaseRelationInfo: row.purchaseRelationInfo,
        purchaseOrderList: row.purchaseRelationInfo.replace("、", ","),
        skc: row.skc,
        colorProperty: row.colorProperty,
      };

      console.log(JSON.stringify(this.queryParamsPurchase));
      // this.$router.push({ path: '/product/secondry', query: { id: row.templateId } })
      await selectConditionList({
        pageNum: 1,
        pageSize: 10,
        // purchaseRelationInfo: row.purchaseRelationInfo,
        purchaseOrderList: row.purchaseRelationInfo.replace("、", ","),
        skc: row.skc,
        colorProperty: row.colorProperty,
        // purchaseOrderNumber: row.purchaseRelationInfo,
      }).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
      this.isOpen = true;
    },
    changeTime() {
      // this.getList();
      // return;

      this.queryParams.oneYear = moment(this.queryParams.oneYear).format(
        "YYYY"
      );
      this.getList();
      console.log(JSON.stringify(this.queryParams.oneYear));
    },
    handleChange() {
      this.queryParams.startTime = this.rangeDate[0];
      this.queryParams.endTime = this.rangeDate[1];
      this.getList();
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    /** 查询库存列表 */
    getList() {
      let query = {
        oneYear: this.queryParams.oneYear,
        brand: this.queryParams.brand,
        supplier: this.queryParams.supplier,
      };
      selectPurchaseOverallData(query).then((response) => {
        this.itemData = response ? response : {};
        this.itemData.oneYear = this.queryParams.oneYear;
        this.itemData.brand = this.queryParams.brand;
        this.itemData.supplier = this.queryParams.supplier;
      });
      this.openLoading();
      selectPurchaseOverallList(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.wmsInventoryList = response.rows ? response.rows : [];
        this.total = response.total;
      });

      // selectPurchaseOverallAll(this.queryParams).then((response) => {
      //   // this.$modal.closeLoading();
      //   this.wmsInventoryList.push(response);
      //   // this.total = response.total;
      // });

      let obj = {
        oneYear: this.queryParams.oneYear,
        brand: this.queryParams.brand,
        supplier: this.queryParams.supplier,
        label: "综合",
      };
      this.getselectPurchaseOverallList(obj);
    },
    //图
    getselectPurchaseOverallList(obj) {
      purchaseOverallStatistics(obj).then((response) => {
        this.echartDataMinAll.xData = response.map((item) => item.supplier);
        //下单总量
        this.echartDataMinAll.female = response.map(
          (item) => item.totalOrderQuantity
        );
        //退货总数
        this.echartDataMinAll.male = response.map(
          (item) => item.returnQuantity
        );
        //销量
        this.echartDataMinAll.average = response.map((item) =>
          item.returnRate ? item.returnRate : 0
        );

        this.echartDataAll.xData = response.map((item) => item.supplier);
        //下单总量
        this.echartDataAll.female = response.map(
          (item) => item.quantityReceived
        );
        //退货总数
        this.echartDataAll.male = response.map(
          (item) => item.unSkuStorageQuantity
        );

        response = response.slice(0, 10);
        this.echartDataMin.xData = response.map((item) => item.supplier);
        //下单总量
        this.echartDataMin.female = response.map(
          (item) => item.totalOrderQuantity
        );
        //退货总数
        this.echartDataMin.male = response.map((item) => item.returnQuantity);
        //销量
        this.echartDataMin.average = response.map((item) =>
          item.returnRate ? item.returnRate : 0
        );

        this.echartData.xData = response.map((item) => item.supplier);
        //下单总量
        this.echartData.female = response.map((item) => item.quantityReceived);
        //退货总数
        this.echartData.male = response.map(
          (item) => item.unSkuStorageQuantity
        );
        // //销量
        // this.echartDataMin.average = response.rows.map(
        //   (item) => item.returnRate
        // );
        return;
        // this.wmsInventoryList = response ? response : {};
        const xAxisData = []; // 用于存放X轴的数据
        const totalOrderQuantityData = []; // 用于存放totalOrderQuantity的数据
        const returnQuantityData = []; // 用于存放returnQuantity的数据

        // response.rows.forEach((item) => {
        //   if (!xAxisData.includes(item.supplier)) {
        //     xAxisData.push(item.supplier);
        //   }
        //   totalOrderQuantityData.push(item.totalOrderQuantity || 0);
        //   returnQuantityData.push(item.returnQuantity || 0);
        // });

        // this.options.xAxis.data = xAxisData;
        // this.options.series[0].data = totalOrderQuantityData;
        // this.options.series[1].data = returnQuantityData;
        // this.chart = echarts.init(this.$refs.chart);
        // this.chart.setOption(this.options);

        const xAxis = []; // 用于存放X轴的数据
        const quantityReceived = []; // 用于存放totalOrderQuantity的数据
        const unSkuStorageQuantity = []; // 用于存放returnQuantity的数据

        response.rows.forEach((item) => {
          if (!xAxis.includes(item.supplier)) {
            xAxis.push(item.supplier);
          }
          quantityReceived.push(item.quantityReceived || 0);
          unSkuStorageQuantity.push(item.unSkuStorageQuantity || 0);
        });

        this.optionsData.xAxis.data = xAxis;
        this.optionsData.series[0].data = quantityReceived;
        this.optionsData.series[1].data = unSkuStorageQuantity;
        this.chartData = echarts.init(this.$refs.chartData);
        this.chartData.setOption(this.optionsData);
      });
    },
    goodstableEdit(row, column, cell, event) {
      // this.spuData = row;
      if (!row.spu || !row.colorProperty) {
        return;
      }

      // this.productNo = row.itemGrade;
      let obj = {};
      if (this.itemType == "item") {
        obj = {
          itemType: "item",
          item: row.spu,
          colorProperty: row.colorProperty,
          monthly: row.monthly,
          supplier: this.queryParams.supplier,
          spu: row.spu,
        };
      } else if (this.itemType == "skc") {
        obj = {
          itemType: "skc",
          skc: row.skc,
          colorProperty: row.colorProperty,
          monthly: row.monthly,
          supplier: this.queryParams.supplier,
          spu: row.skc,
        };
      }

      //总览
      // this.getselectPurchasePriceData(obj);
      // //趋势图
      // this.getselectPurchasecostStatistics(obj);

      // if (this.queryParams.itemType == "item") {
      //   this.getitemSaleData(obj);
      //   this.getskcData(obj);
      //   this.selectItemStatisticsEcharts(obj);
      // }
    },
    //趋势图
    getselectPurchasecostStatistics(obj) {
      selectPurchasecostStatistics(obj).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.monthly,
            单价: item.purchasePrice,
            数量: item.purchaseTotalCount,
          });
        });
        console.log(JSON.stringify(row));

        this.echartDataI.rows = row;
      });
    },
    //总览
    getselectPurchasePriceData(obj) {
      selectPurchasePriceData(obj).then((response) => {
        console.log(JSON.stringify(response));
        this.itemData = response ? response : {};
        this.itemData.spu = obj.spu;
        this.itemData.colorProperty = obj.colorProperty;
        this.itemData.purchasePrice = obj.purchasePrice;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        itemId: null,
        rackId: null,
        quantity: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.pageReq.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.brand = "";
      this.queryParams.supplier = "";
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handlePurchaseExport() {
      this.download(
        "purchase/PurchaseBasicsDwd/voExport",
        {
          ...this.queryParamsPurchase,
        },
        `PurchaseBasicsDwd_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "purchase/PurchaseBasicsDwd/exportPurchaseOverall",
        {
          ...this.queryParams,
        },
        `exportPurchaseOverall${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
/**下单月份*/
@Excel(name = "下单月份")
private String monthly;

/** 品牌 */
@Excel(name = "品牌")
private String brand;

/** 供应商 */
@Excel(name = "供应商")
private String supplier;

/** 下单合同数 */
@Excel(name = "下单合同数")
private Integer orderContractQuantity;


/** 下单skc种类数 */
@Excel(name = "下单skc种类数")
private Integer orderSkcQuantity;

/** 下单产品总数 */
@Excel(name = "下单产品总数")
private Integer orderProQuantity;

/** 待入库产品数 */
@Excel(name = "待入库产品数")
private Integer waitProQuantity;

/** 下单金额占比(占月度总额) */
@Excel(name = "下单金额占比(占月度总额)")
private Double orderAmountMonthRatio;

/** 下单数量占比(占月度总额) */
@Excel(name = "下单数量占比(占月度总额)")
private Double orderQuantityMonthRatio;

/** 下单金额占比(占年度总额) */
@Excel(name = "下单金额占比(占年度总额)")
private Double orderAmountYearRatio;

/** 下单数量占比(占年度总额) */
@Excel(name = "下单数量占比(占年度总额)")
private Double orderQuantityYearRatio;

/** 产品类型 */
private String contractType;



/** 合同采购金额（¥） */
@Excel(name = "合同金额", readConverterExp = "¥=")
private Double contractAmount;


/** 已入库数量 */
@Excel(name = "已入库数量")
private Integer quantityReceived;

/** 协议日期内已交货数量 */
@Excel(name = "协议日期内已交货数量")
private Integer overdueQuantity30Days;

/** 超入数量 */
@Excel(name = "超入数量")
private Integer overOrderQuantity;


/** 历史最高单价 */
@Excel(name = "历史最高单价")
private String maxPurchasePrice;

/** 历史最低单价 */
@Excel(name = "历史最低单价")
private String minPurchasePrice;

/** 近6个月最高单价 */
@Excel(name = "近6个月最高单价")
private String sixMonthPriceMax;

/** 平均采购单价 */
@Excel(name = "平均采购单价")
private String avgPurchasePrice;


/** 采购订单数 */
private Integer purOrderQuantity;

/** 采购订单未完结数 */
private Integer unPurOrderQuantity;

/** 合同总数 */
private Integer contractQuantity;

/** 合同未完结数 */
private Integer unContractQuantity;

/** 入库sku件数 */
private Integer skuStorageAllQuantity;
/** sku已入库数 */
private Integer skuStorageQuantity;
/** sku待入库数 */
private Integer unSkuStorageQuantity;


/** 质检退货sku件数 */
private Integer returnQuantity;


/** 不合格率 */
private Integer fractionDefective;

/** 应交总sku数 */
private Integer skuAllQuantity;

/** 延迟数 */
private Integer delayQuantity;




/** 供应商 */
@Excel(name = "供应商")
private String supplier;

/** 品牌 */
@Excel(name = "品牌")
private String brand;

/** 采购订单数 */
private Integer purOrderQuantity;

/** 合同总数 */
private Integer contractQuantity;

/** 下单款式总量 */
private Integer orderItemQuantity;


/** 下单skc数量 */
private Integer orderSkcQuantity;

/** 已下单产品数量 *//** 应交总sku数 */
private Integer totalOrderQuantity;
/** 已交付产品数量 *//** sku已入库数 */
private Integer quantityReceived;
/** 待交付产品数量 *//** sku待入库数 */
private Integer unSkuStorageQuantity;
/** 已延迟产品数量 */
private Integer currentDelayQuantity;

/** 质检退货sku件数 */
private Integer returnQuantity;

/** 不合格率 */
private Double fractionDefective;


/** 平均交货周期 */
private Double avgDeliveryCycle;

/** 平均采购件数 */
private Double avgPurchaseQuantity;


